<template>
  <div>
    <div :class="$style.box" :style="`height:${cuHeight};`" @scroll="handleScroll" ref="vipIndexTable">
      <div :class="[$style.titleBox,cuGroup === '回访组'? $style.hfFixTop : '']" @scroll="handleScroll" ref="vipIndexTableTitle" :style="`top:${PtTitle}`">
        <!-- 由于不同组布局不同先做成三个 -->
        <ul v-if="cuGroup === '业务组'" :class="[$style.title,$style.row]" >
          <li :class="$style.ywTdWid1">备注</li>
          <li :class="$style.ywTdWid2">收藏</li>
          <li :class="$style.ywTdWid3">收藏客户</li>
          
          <li :class="[$style.ywTdWid3,$style.pointer]" @click="handleSort('syts')">
            剩余天数
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'syts_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'syts_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="[$style.ywTdWid4,$style.pointer]" @click="handleSort('whDate')">
            联系时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'whDate_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'whDate_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="[$style.ywTdWid5,$style.pointer]" @click="handleSort('fScore')">
            评分
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'fScore_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'fScore_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          
          <li :class="$style.ywTdWid6">
            <span :class="$style.stct">首投天数/<br>注册天数</span>
          <li :class="$style.ywTdWid7">ID</li>
          <li :class="$style.ywTdWid8">用户名</li>
          <li :class="$style.ywTdWid9">真实姓名</li>
          <li :class="$style.ywTdWid10" @click="handleSort('tSmshsj')">
            实名时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'tSmshsj_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'tSmshsj_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="[$style.ywTdWid11,$style.pointer]" @click="handleSort('tDate')">
            注册时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'tDate_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'tDate_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="$style.ywTdWid12">手机号</li>
          <li :class="$style.ywTdWid13">可用金额
            <span :class="$style.sortBox" @click="handleSort('fSjje')">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'fSjje_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'fSjje_desc' ? $style.active : '')]"></i>
            </span>
          <li :class="$style.ywTdWid14" @click="handleSort('dsje')">待收金额
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'dsje_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'dsje_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="$style.ywTdWid15">
            <span :class="$style.stct">投资笔数/<br>投资总额</span>
          <li :class="$style.ywTdWid16">渠道</li>
        </ul>
        <ul v-if="cuGroup === '答疑组'" :class="[$style.title,$style.row]">
          <li :class="$style.dyTdWid1">用户名</li>
          <li :class="$style.dyTdWid2">ID</li>
          <li :class="$style.dyTdWid3">等级</li>
          <li :class="$style.dyTdWid19">管理</li>
          <li :class="$style.dyTdWid4">真实姓名</li>
          <li :class="$style.dyTdWid5">手机号</li>
          <li :class="$style.dyTdWid6">收藏</li>
          <li :class="$style.dyTdWid7">收藏客户</li>
          <li :class="$style.dyTdWid8">评分</li>
          <li :class="$style.dyTdWid9">备注</li>
          <li :class="[$style.dyTdWid10,$style.pointer]" @click="handleSort('tDate')">
            注册时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'tDate_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'tDate_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="$style.dyTdWid11">贵州银行</li>
          <li :class="$style.dyTdWid12">可用金额
          <li :class="$style.dyTdWid13">微信</li>
          <li :class="$style.dyTdWid14">客服名字</li>
          <li :class="$style.dyTdWid15">自动投标</li>
          <li :class="$style.dyTdWid16">客户分类</li>
          <li :class="$style.dyTdWid17">渠道</li>
          <li :class="$style.dyTdWid18">渠道负责组</li>
        </ul>
        <ul v-if="cuGroup === '质检组'" :class="[$style.title,$style.row]">
          <li :class="$style.dyTdWid1">用户名</li>
          <li :class="$style.dyTdWid2">ID</li>
          <li :class="$style.dyTdWid3">等级</li>
          <li :class="$style.dyTdWid19">管理</li>
          <li :class="$style.dyTdWid4">真实姓名</li>
          <li :class="$style.dyTdWid5">手机号</li>
          <li :class="$style.dyTdWid6">收藏</li>
          <li :class="$style.dyTdWid7">收藏客户</li>
          <li :class="$style.dyTdWid8">评分</li>
          <li :class="$style.dyTdWid9">备注</li>
          <li :class="[$style.dyTdWid10,$style.pointer]" @click="handleSort('tDate')">
            注册时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'tDate_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'tDate_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="$style.dyTdWid11">贵州银行</li>
          <li :class="$style.dyTdWid12">可用金额
          <li :class="$style.dyTdWid13">微信</li>
          <li :class="$style.dyTdWid14">客服名字</li>
          <li :class="$style.dyTdWid15">自动投标</li>
          <li :class="$style.dyTdWid16">客户分类</li>
          <li :class="$style.dyTdWid17">渠道</li>
          <li :class="$style.dyTdWid18">渠道负责组</li>
        </ul>
        <ul v-if="cuGroup === '回访组'" :class="[$style.title,$style.row]">
          <li :class="$style.hfTdWid1">用户名</li>
          <li :class="$style.hfTdWid2">ID</li>
          <li :class="$style.hfTdWid3">等级</li>
          <li :class="$style.hfTdWid4">真实姓名</li>
          <li :class="$style.hfTdWid5">手机号</li>
          <li :class="$style.hfTdWid6">备注</li>
          <li :class="$style.hfTdWid17">评分</li>
          <li :class="$style.hfTdWid18">自动投标</li>
          <li :class="[$style.hfTdWid7,$style.pointer]" @click="handleSort('tDate')" >
            注册时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'tDate_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'tDate_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="[$style.hfTdWid8,$style.pointer]"  @click="handleSort('zjtzDate')">
            投资时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'zjtzDate_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'zjtzDate_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="[$style.hfTdWid9,$style.pointer]" @click="handleSort('whDate')">
            联系时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'whDate_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'whDate_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="[$style.hfTdWid10,$style.pointer]" @click="handleSort('zrDate')">
            转入时间
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'zrDate_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'zrDate_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="$style.hfTdWid11">清零时间
          <li :class="$style.hfTdWid12" @click="handleSort('dsje')">待收金额
            
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'dsje_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'dsje_desc' ? $style.active : '')]"></i>
            </span>
          </li>
          <li :class="$style.hfTdWid13" @click="handleSort('fSjje')">可用金额
            <span :class="$style.sortBox">
              <i class="el-icon-caret-top" :class="[$style.caret,$style.top,(paixu === 'fSjje_asc'? $style.active : '')]"></i>
              <i class="el-icon-caret-bottom" :class="[$style.caret,$style.bottom,(paixu === 'fSjje_desc' ? $style.active : '')]"></i>
            </span>
          <li :class="$style.hfTdWid14">微信</li>
          <li :class="$style.hfTdWid15">客服名字</li>
          <li :class="$style.hfTdWid16">渠道</li>
        </ul>
      </div>
        <div v-if="cuGroup === '答疑组'" :class="$style.contWrapper" ref="tableData" class="show">
          <ul :class="[$style.row]" v-for="(item, index) in tableData" :key="index">
            <li :class="$style.dyTdWid1" @click="goDetail(item.id,index)">
              <span :class="$style.click">{{item.cU_ser}}</span><br>
            </li>
            <li :class="[$style.dyTdWid2,Number.parseInt(item.whcs, 10) > 0? $style.idRed : '']">{{item.id}}</li>
            <li :class="[$style.dyTdWid3,$style.click]" @click="$router.push(`/vip-manage/detail/${item.id}/VIP等级成长值`)">{{item.vipLevel || 0}}</li>
            <li :class="[$style.dyTdWid19,item.fLok === '锁定'?'':$style.red]" >{{item.fLok === '锁定'?'锁定':'解锁'}}</li>
            <li :class="$style.dyTdWid4">
              <div class="tjrBox">
                <div v-if="item.cName"><span>{{item.cName || ''}}</span></div>
                <div :class="item.cName ? '' : $style.newstr">
                  <span 
                  :class="item.fTjrid && item.fTjrid !== '0' ? $style.tjr : ''" 
                  @click="item.fTjrid && item.fTjrid !== '0' && $router.push(`/vip-manage/detail/${item.fTjrid}/jbxx`)">
                  {{item.fTjrid !== '0'?item.fTjrid : ''}}
                </span>
                </div>
                <!-- <span :class="$style.tjr">{{item.fTjrid}}</span> -->
              </div>
            </li>
            <li :class="$style.dyTdWid5">
              <img @click="callPhone(item.cMtel,item.id)" src="./images/phone.png" :class="$style.phoneIcon">
              <span :class="$style.watch" @click="watch(index,item.id)" v-if="tableData.length > 0 && !watchPhone[index].isTrue">点击查看</span>
              <span v-if="watchPhone[index].isTrue" @click="callPhone(item.cMtel)" style="cursor:pointer">{{item.cMtel}}</span>
            </li>
            <li :class="[$style.dyTdWid6,$style.pointer]" @click="CollectionDialog(item.id)">
              <img src="./images/heart.1.png" v-if="item.bqName">
              <img src="./images/heart.png" v-else>
            </li>
            <li :class="$style.dyTdWid7">{{item.bqName}}</li>
            <li :class="$style.dyTdWid8">{{item.fScore}}</li>
            <li :class="[$style.dyTdWid9,$style.pointer]" @click="remarkDialog(item.id)">({{item.whcs || 0}})次</li>
            <li :class="$style.dyTdWid10">{{item.tDate}}</li>
            <li :class="$style.dyTdWid11">
              <span v-if="item.gzyh" @click="bankDialog(index)" :class="$style.click">{{item.gzyh}}</span>
              <span :class='$style.clicktr' v-if='item.gzyh'>{{item.gzCgJH}}</span>
              <span v-if="!item.gzyh">未开户</span>
            </li>
            <li :class="$style.dyTdWid12">{{item.fSjje}}</li>
            <li :class="[$style.dyTdWid13,$style.pointer,item.fIsWeixin == 0 ? '' : $style.red]" @click="addWx(item.id,item.fIsWeixin,index)" >{{item.fIsWeixin == 0 ? '未添加' : '已添加'}}</li>
            <li :class="[$style.dyTdWid14,item.fXdykf1 && (userInfo.power === 2 || userInfo.power === 5) && (userInfo.userGroupId === 104 || userInfo.userGroupId === 112)? $style.click : '']"
              @click="kfDialog(index,item.fXdykf1)"
            >
              {{item.fXdykf1}}
            </li>
            <li :class="[$style.dyTdWid15,$style.click]" @click="showAuto(item.id,item.gzyh)" >{{item.fIszd === '1' ? '开启' : '关闭'}}</li>
            <li :class="$style.dyTdWid16">{{item.khfl}}</li>
            <li :class="$style.dyTdWid17">
              <!-- <div :class="$style.qd"> -->
                {{item.fRegfrom !== '0' ? `(${item.fRegfrom}:${item.fRegName})` : `(0:官网注册)`}}
              <!-- </div> -->
              <!-- <span :class="$style.tjr">{{item.fTjrid}}</span>{{item.fRegfrom !== '0' ? `(${item.fRegfrom}:${item.fRegName})` : `(0:官网注册)`}} -->
            </li>
            <li :class="$style.dyTdWid18">{{item.cGroup || ''}}</li>
          </ul>
        </div>
        <div v-if="cuGroup === '质检组'" :class="$style.contWrapper" ref="tableData" class="show">
          <ul :class="[$style.row]" v-for="(item, index) in tableData" :key="index">
            <li :class="$style.dyTdWid1" @click="goDetail(item.id,index)">
              <span :class="$style.click">{{item.cU_ser}}</span><br>
            </li>
            <li :class="[$style.dyTdWid2,Number.parseInt(item.whcs, 10) > 0? $style.idRed : '']">{{item.id}}</li>
            <li :class="[$style.dyTdWid3,$style.click]" @click="$router.push(`/vip-manage/detail/${item.id}/VIP等级成长值`)">{{item.vipLevel || 0}}</li>
            <li :class="[$style.dyTdWid19,item.fLok === '锁定'?'':$style.red]" >{{item.fLok === '锁定'?'锁定':'解锁'}}</li>
            <li :class="$style.dyTdWid4">
              <div class="tjrBox">
                <div v-if="item.cName"><span>{{item.cName || ''}}</span></div>
                <div :class="item.cName ? '' : $style.newstr">
                  <span 
                  :class="item.fTjrid && item.fTjrid !== '0' ? $style.tjr : ''" 
                  @click="item.fTjrid && item.fTjrid !== '0' && $router.push(`/vip-manage/detail/${item.fTjrid}/jbxx`)">
                  {{item.fTjrid !== '0'?item.fTjrid : ''}}
                </span>
                </div>
                <!-- <span :class="$style.tjr">{{item.fTjrid}}</span> -->
              </div>
            </li>
            <li :class="$style.dyTdWid5">
              <img @click="callPhone(item.cMtel,item.id)" src="./images/phone.png" :class="$style.phoneIcon">
              <span :class="$style.watch" @click="watch(index,item.id)" v-if="tableData.length > 0 && !watchPhone[index].isTrue">点击查看</span>
              <span v-if="watchPhone[index].isTrue" @click="callPhone(item.cMtel)" style="cursor:pointer">{{item.cMtel}}</span>
            </li>
            <li :class="[$style.dyTdWid6,$style.pointer]" @click="CollectionDialog(item.id)">
              <img src="./images/heart.1.png" v-if="item.bqName">
              <img src="./images/heart.png" v-else>
            </li>
            <li :class="$style.dyTdWid7">{{item.bqName}}</li>
            <li :class="$style.dyTdWid8">{{item.fScore}}</li>
            <li :class="[$style.dyTdWid9,$style.pointer]" @click="remarkDialog(item.id)">({{item.whcs || 0}})次</li>
            <li :class="$style.dyTdWid10">{{item.tDate}}</li>
            <li :class="$style.dyTdWid11">
              <span v-if="item.gzyh" @click="bankDialog(index)" :class="$style.click">{{item.gzyh}}</span>
              <span :class='$style.clicktr' v-if='item.gzyh'>{{item.gzCgJH}}</span>
              <span v-if="!item.gzyh">未开户</span>
            </li>
            <li :class="$style.dyTdWid12">{{item.fSjje}}</li>
            <li :class="[$style.dyTdWid13,$style.pointer,item.fIsWeixin == 0 ? '' : $style.red]" @click="addWx(item.id,item.fIsWeixin,index)" >{{item.fIsWeixin == 0 ? '未添加' : '已添加'}}</li>
            <li :class="[$style.dyTdWid14,item.fXdykf1 && (userInfo.power === 2 || userInfo.power === 5) && (userInfo.userGroupId === 104 || userInfo.userGroupId === 112)? $style.click : '']"
              @click="kfDialog(index,item.fXdykf1)"
            >
              {{item.fXdykf1}}
            </li>
            <li :class="[$style.dyTdWid15,$style.click]" @click="showAuto(item.id,item.gzyh)" >{{item.fIszd === '1' ? '开启' : '关闭'}}</li>
            <li :class="$style.dyTdWid16">{{item.khfl}}</li>
            <li :class="$style.dyTdWid17">
              <!-- <div :class="$style.qd"> -->
                {{item.fRegfrom !== '0' ? `(${item.fRegfrom}:${item.fRegName})` : `(0:官网注册)`}}
              <!-- </div> -->
              <!-- <span :class="$style.tjr">{{item.fTjrid}}</span>{{item.fRegfrom !== '0' ? `(${item.fRegfrom}:${item.fRegName})` : `(0:官网注册)`}} -->
            </li>
            <li :class="$style.dyTdWid18">{{item.cGroup || ''}}</li>
          </ul>
        </div>
        <div v-if="cuGroup === '业务组'" :class="$style.contWrapper" ref="tableData" class="show">
          <ul :class="[$style.row]" v-for="(item, index) in tableData" :key="index">
            <!-- 备注 -->
            <li :class="[$style.ywTdWid1,$style.pointer]" @click="remarkDialog(item.id)">
              <i v-if="!item.whcs" class="el-icon-circle-cross add"></i>
              <i v-else class="el-icon-circle-check ok"></i>
              ({{item.whcs || 0}})次</li>
            <!-- 收藏 -->
            <li :class="[$style.ywTdWid2,$style.pointer]" @click="CollectionDialog(item.id)">
              <img src="./images/heart.1.png" v-if="item.bqName">
              <img src="./images/heart.png" v-else>
            </li>
            <!-- 收藏客户 -->
            <li :class="$style.ywTdWid3" @click="shoucangFN(item.id)">{{item.bqName}}</li>
            <!-- 剩余天数 -->
            <li :class="$style.ywTdWid3">{{item.syts}}</li>
            <!-- 联系时间 -->
            <li :class="$style.ywTdWid4">{{item.whDate}}</li>
            <!-- 评分 -->
            <li :class="$style.ywTdWid5">{{item.fScore}}</li>
            <!-- 首投天数/注册天数 -->
            <li :class="$style.ywTdWid6">{{item.tStsj1 + '/' + item.tSjtjsj}}</li>
            <!-- ID -->
            <li :class="[$style.ywTdWid7,Number.parseInt(item.whcs, 10) > 0? $style.idRed : '']">{{item.id}}</li>
            <!-- 用户名 -->
            <li :class="$style.ywTdWid8" @click="goDetail(item.id,index)">
              <span :class="$style.click">{{item.cU_ser}}</span><br>
            </li>
            <!-- 真实姓名 -->
            <li :class="$style.ywTdWid9">
              <div class="tjrBox">
                <div v-if="item.cName"><span>{{item.cName || ''}}</span></div>
                <div :class="item.cName ? '' : $style.newstr">
                  <span 
                  :class="item.fTjrid && item.fTjrid !== '0' ? $style.tjr : ''" 
                  @click="item.fTjrid && item.fTjrid !== '0' && $router.push(`/vip-manage/detail/${item.fTjrid}/jbxx`)">
                  {{item.fTjrid !== '0'?item.fTjrid : ''}}
                </span>
                </div>
                
                <!-- <span :class="$style.tjr">{{item.fTjrid}}</span> -->
              </div>
            </li>
            <!-- 实名时间 -->
            <li :class="$style.ywTdWid10">{{item.tSmshsj}}</li>
            <!-- 注册时间 -->
            <li :class="$style.ywTdWid11">{{item.tDate}}</li>
            <!-- 手机号码 -->
            <li :class="$style.ywTdWid12">
              <img @click="callPhone(item.cMtel,item.id)" src="./images/phone.png" :class="$style.phoneIcon">
              <span :class="$style.watch" @click="watch(index,item.id)" v-if="!watchPhone[index].isTrue">点击查看</span>
              <span v-if="watchPhone[index].isTrue" @click="callPhone(item.cMtel)" style="cursor:pointer">{{item.cMtel}}</span>
            </li>
            <!-- 可用金额 -->
            <li :class="$style.ywTdWid13">{{item.fSjje}}</li>
            <!-- 待收金额 -->
            <li :class="$style.ywTdWid14">{{item.fDsje}}</li>
            <!-- 投资笔数/投资金额 -->
            <li :class="$style.ywTdWid15">{{item.dsbs + '/' + item.fTzze}}</li>
            <!-- 渠道 -->
            <li :class="[$style.ywTdWid16]">
              {{item.fRegfrom !== '0' ? `(${item.fRegfrom}:${item.fRegName})` : `(0:官网注册)`}}
            </li>
          </ul>
        </div>
        <div v-if="cuGroup === '回访组'" :class="$style.contWrapper" ref="tableData" class="show">
          <ul :class="[$style.row]" v-for="(item, index) in tableData" :key="index">
            <li :class="$style.hfTdWid1" @click="goDetail(item.id,index)">
              <span :class="$style.click">{{item.cU_ser}}</span><br>
            </li>
            <li :class="[$style.hfTdWid2,Number.parseInt(item.whcs, 10) > 0? $style.idRed : '']">{{item.id}}</li>
            <li :class="[$style.hfTdWid3,$style.click]" @click="$router.push(`/vip-manage/detail/${item.id}/VIP等级成长值`)">{{item.vipLevel || 0}}</li>
            <li :class="$style.hfTdWid4">
              <div class="tjrBox">
                <div v-if="item.cName"><span>{{item.cName || ''}}</span></div>
                <div :class="item.cName ? '' : $style.newstr">
                  <span 
                  :class="item.fTjrid && item.fTjrid !== '0' ? $style.tjr : ''" 
                  @click="item.fTjrid && item.fTjrid !== '0' && $router.push(`/vip-manage/detail/${item.fTjrid}/jbxx`)">
                  {{item.fTjrid !== '0'?item.fTjrid : ''}}
                </span>
                </div>
                <!-- <span :class="$style.tjr">{{item.fTjrid}}</span> -->
              </div>
            </li>
            <li :class="$style.hfTdWid5">
              <img @click="callPhone(item.cMtel,item.id)" src="./images/phone.png" :class="$style.phoneIcon">
              <span :class="$style.watch" @click="watch(index,item.id)" v-if="!watchPhone[index].isTrue">点击查看</span>
              <span v-if="watchPhone[index].isTrue" @click="callPhone(item.cMtel)" style="cursor:pointer">{{item.cMtel}}</span>
            </li>
            <li :class="[$style.hfTdWid6,$style.pointer]" @click="remarkDialog(item.id)">({{item.whcs || 0}})次</li>
            <!-- 中间添加:评分 -->
            <li :class="$style.hfTdWid17">{{item.fScore}}</li>
            <li :class="[$style.hfTdWid18,$style.click]" @click="showAuto(item.id,item.gzyh)" >{{item.fIszd === '1' ? '开启' : '关闭'}}</li>
            <!--  -->
            <li :class="$style.hfTdWid7">{{item.tDate}}
            <li :class="$style.hfTdWid8">{{item.zjtzDate}}
            <li :class="$style.hfTdWid9">{{item.whDate}}
            <li :class="$style.hfTdWid10">{{item.zrDate}}
            <li :class="$style.hfTdWid11">{{item.qlDate}}
            <li :class="$style.hfTdWid12">{{item.fDsje}}
            <li :class="$style.hfTdWid13">{{item.fSjje}}
            <li :class="[$style.hfTdWid14, $style.pointer,item.fIsWeixin == 0 ? '' : $style.red]" @click="addWx(item.id,item.fIsWeixin,index)">{{item.fIsWeixin == 0 ? '未添加' : '已添加'}}</li>
            <li :class="[$style.hfTdWid15,item.fXdykf1 && (userInfo.power === 2 || userInfo.power === 5) && (userInfo.userGroupId === 104 || userInfo.userGroupId === 112)? $style.click : '']"
              @click="kfDialog(index,item.fXdykf1)"
            >
              {{item.fXdykf1}}
            </li>
            <li :class="$style.hfTdWid16">
              {{item.fRegfrom !== '0' ? `(${item.fRegfrom}:${item.fRegName})` : `(0:官网注册)`}}
            </li>
          </ul>
        </div>
    </div>
    <!-- <el-pagination style="display:inline-block"
      @current-change="handleCurrentChange"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :current-page.sync="currentPage">
    </el-pagination> -->
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSize.opts"
      :page-size="pageSize.value"
      layout="sizes, prev, pager, next, jumper, total"
      :total="total">
    </el-pagination> -->
     <!-- <div style="margin:30px 0; float:right;font-size:14px;"> -->
     <div :class="$style.pagerBox">
      <input type="text" :class="$style.targetPage" v-model="targetPage" @keyup.enter="handleCurrentChange(targetPage)">
        第{{currentPage}}页
      <span :class="$style.pager" @click="prev">上一页</span>
      <span :class="$style.pager" @click="next">下一页</span>
    </div>
    <el-dialog
    :visible.sync="remarkData.dialog"
    :before-close="cancleRemarkDialog"
    size="small">
      <div :class="$style.remarkBox">
        <div :class="$style.title">客户意向</div>
        <div :class="$style.detail">
          <div :class="$style.tit">客户状态</div>
            <el-radio-group v-model="remarkData.situation.value" style="font-size:16px;">
               <!-- <div v-for="item in remarkData.situation.options" :key="item.title">
                <h3 :class="$style.h3">{{item.title}}</h3>
                <el-radio style="margin-top:20px;margin-left:20px;" :label="sitem.value" v-for="(sitem,index) in item.arr" :key="index">{{sitem.label}}</el-radio>
              </div> -->
               <el-collapse :value="remarkData.situation.options[0].title" accordion>
                <el-collapse-item
                  v-for="item in remarkData.situation.options"
                  :key="item.title"
                  :title="item.title"
                  :name="item.title">
                  <el-radio style="margin-top:20px;margin-left:20px;" :label="sitem.value" v-for="(sitem,index) in item.arr" :key="index">{{sitem.label}}</el-radio>
                </el-collapse-item>
              </el-collapse>
            </el-radio-group>
        </div>
        <div :class="$style.detail">
          <div :class="$style.tit">客户性格</div>
            <el-radio-group v-model="remarkData.character.value" >
              <el-radio style="margin-top:20px;margin-left:20px;" :label="item.value" v-for="(item,index) in remarkData.character.options" :key="index">{{item.label}}</el-radio>
            </el-radio-group>
        </div>

        <div :class="[$style.title,$style.noBorder]">客户情况</div>
        <el-collapse accordion>
          <el-collapse-item title="客户情况">
            <div :class="$style.detail">
              <div :class="$style.tit">客户偏好</div>
              <el-checkbox-group v-model="remarkData.preference.value">
                <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.preference.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div :class="$style.detail">
              <div :class="$style.tit">客户反馈</div>
              <el-checkbox-group v-model="remarkData.feedback.value">
                <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.feedback.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div :class="$style.detail">
              <div :class="$style.tit">了解网贷平台的途径</div>
              <el-checkbox-group v-model="remarkData.channel.value">
                <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.channel.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div :class="$style.detail">
              <div :class="$style.tit">流失原因</div>
              <el-checkbox-group v-model="remarkData.reason.value">
                <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.reason.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-collapse-item>
        </el-collapse>

        <div :class="$style.title">备注</div>
        <div :class="$style.detail">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            :maxlength="200"
            v-model="remarkData.remarkCont">
          </el-input>
        </div>
        <div :class="$style.title">维护历史</div>
        <div :class="$style.detail" style="height:50px;overflow-y:scroll;border-bottom: 1px solid #dddfe6">
          <div :class="$style.history" v-for="(item,index) in remarkData.history" :key="index">
            ({{item.tDate}}){{item.cKfmc || '客服'}}:{{item.cNr}} <span :class="$style.red" style="margin-left:20px;">{{item.cKfState}}</span>
          </div>
        </div>
        <div style="margin: 20px 0;text-align:center;">
          <el-button type="primary" @click="saveRemarkDialog">提交</el-button>
          <el-button @click="cancleRemarkDialog">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
    :visible.sync="collectionData.dialog"
    title = "是否确认收藏？"
    :before-close="cancleCollectionDialog"
    size="tiny" >
      <div :class="$style.collection">
        <div>
          <el-input v-model="collectionData.value" placeholder="添加标签" style="width:200px;"></el-input>
          <el-button type="primary" @click="collectionAdd">提交</el-button>
        </div>
        <div>
          <div :class="$style.tit">所有标签
            <el-button type="primary" @click="collectionModify()">{{collectionData.modify ? "确认" : "编辑"}}</el-button>
          </div>
          <div style="overflow:hidden">
            <div :class="[$style.tip,{[$style.active]: item.id == collectionData.active }]" v-for="(item,index) in collectionData.options" :key="index">
              <div v-show="collectionData.modify != item.id" @click="activeLabel(item.id)">{{item.bqName}}</div>
              <el-input v-model="item.bqName" placeholder="添加标签" style="width:200px;" v-show="collectionData.modify == item.id"></el-input>
            </div>
          </div>
          
        </div>
      </div>
      <div slot="footer">
            <el-button type="primary" @click="saveCollectionDialog">提交</el-button>
            <el-button @click="cancleCollectionDialog">取消</el-button>
          </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="shoucangData.dialog"
      size="tiny"
      :before-close="cancleShouCang">
      <span>确定取消收藏吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleShouCang">取 消</el-button>
        <el-button type="primary" @click="sureShouCang">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="银行流水" :visible.sync="bankData.dialog">
        <el-row :gutter="20">
          <el-col :span="5">ID：
            <el-input v-model="bankData.id" placeholder="请输入ID" style="width: 70%"></el-input>
          </el-col>
          <el-col :span="7">存管ID:
            <el-input v-model="bankData.UsrCustId" placeholder="请输入存管ID" style="width: 70%"></el-input>
          </el-col>
          <el-col :span="8">时间:
            <el-date-picker
              v-model="bankData.date"
              type="daterange"
              placeholder="选择日期范围" style="width: 80%">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="getBankDetail">搜索</el-button>
            <el-button type="primary" @click="export_">导出</el-button>
          </el-col>
        </el-row>
      <el-table :data="bankData.tableData" border align="center" style="margin-top: 20px;">
        <el-table-column property="TransAmt" label="操作金额" width="150" align="center"></el-table-column>
        <el-table-column property="Remark" label="操作说明" width="200" align="center"></el-table-column>
        <el-table-column property="AcctBal" label="当前余额" align="center"></el-table-column>
        <el-table-column property="ChannelId" label="交易订单号" align="center">
          <template slot-scope="scope">
            <span @click="bankData_detail(scope.$index)" :class="$style.click">查看</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center">
          <template slot-scope="scope">
              {{`${scope.row.TransDateTime.slice(0,4)}-${scope.row.TransDateTime.slice(4,6)}-${scope.row.TransDateTime.slice(6,8)} ${scope.row.TransDateTime.slice(8,10)}:${scope.row.TransDateTime.slice(10,12)}:${scope.row.TransDateTime.slice(12,14)}`}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="bankData.dialog1" size="tiny">
      <div>
        存管银行流水号：{{bankData.DepoBankSeq}}
      </div>
      <div>
        OrdId: {{bankData.OrdId}}
      </div>
    </el-dialog>
    <el-dialog title="修改客服" :visible.sync="dialogKfVisible" size="tiny">
        <el-select v-model="kfValue" clearable placeholder="服务客服">
          <el-option
            v-for="(item,index) in vague.choice.options"
            :key="index"
            :label="item.UserName"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" @click="updatekf">确 定</el-button>
    </el-dialog>
    <el-dialog title="自动投标" :visible.sync="auto.dialog">
      <div class="autoContent" v-text="auto.tableData"></div>
      <!-- <el-table
        :data="auto.tableData && auto.tableData"
        style="width: 100%">
        <el-table-column
          prop="SignStat"
          label="是否签约自动投标"
          width="180">
        </el-table-column>
        <el-table-column
          prop="SignDateTime"
          label="签约时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="EndDate"
          label="到期时间">
        </el-table-column>
        <el-table-column
          prop="CancelDateTime"
          label="撤销事件">
        </el-table-column>
        <el-table-column
          prop="SingleLimit"
          label="单笔限额">
        </el-table-column>
        <el-table-column
          prop="TotalLimit"
          label="最大在投金额">
        </el-table-column>
      </el-table> -->
    </el-dialog>
</div>

</template>

<script>
import { dateFormat } from 'vux'
import {callout} from '../../../config/mixin'
export default {
  mixins: [callout],
  data () {
    const {power} = this.$store.getters.getUserInfo
    return {
      // 添加参数
      h:'',
      bqindex:'',
      //是否取消客户收藏
     
      power,
      watchPhone:[],
      tableData: [
      ],
      remarkData:{
        id: null,
        dialog: false,
        situation:{
          value:'',
          options:[
            {
              title:'未接通状态',
              arr:[
                {
                  value:'未接通',
                  label:'未接通'
                },
                {
                  value:'暂时无法接通/不在服务区',
                  label:'暂时无法接通/不在服务区'
                },
                {
                  value: '还没打过电话',
                  label: '还没打过电话'
                },
                {
                  value: '无人接听',
                  label: '无人接听'
                },
                {
                  value: '电话占线',
                  label: '电话占线'
                },
                {
                  value: '关机',
                  label: '关机'
                },
                {
                  value: '拒接',
                  label: '拒接'
                },
                {
                  value: '呼叫限制',
                  label: '呼叫限制'
                },{
                  value: '停机',
                  label: '停机'
                },{
                  value: '未开通语音通话功能',
                  label: '未开通语音通话功能'
                },{
                  value: '号码已过期',
                  label: '号码已过期'
                }
              ]
            },
            {
              title:'有意向客户',
              arr:[
                {
                  value: '有意向',
                  label: '有意向'
                },
                {
                  value: '已充值或投资50以上',
                  label: '已充值或投资50以上'
                },
                {
                  value: '预约待回访',
                  label: '预约待回访'
                },
                
                {
                  value: '朋友介绍',
                  label: '朋友介绍'
                },
                {
                  value: '明确表示准备投资',
                  label: '明确表示准备投资'
                },
                {
                  value: '有其他平台的投资经历',
                  label: '有其他平台的投资经历'
                },
                {
                  value: '对网站红包活动感兴趣，而且提问',
                  label: '对网站红包活动感兴趣，而且提问'
                },
                {
                  value: '已绑定银行卡或绑卡失败',
                  label: '已绑定银行卡或绑卡失败'
                },
                
              ]
            },
            
            {
              title:'意向不明确客户',
              arr:[
                {
                  value: '暂时不需要',
                  label: '暂时不需要'
                },
                {
                  value: '意向不明确',
                  label: '意向不明确'
                },
                {
                  value: '非本人注册',
                  label: '非本人注册'
                },
                {
                  value: '在忙自己看或了解',
                  label: '在忙自己看或了解'
                },
                {
                  value: '信号不好',
                  label: '信号不好'
                },
                {
                  value: '通话背景声噪',
                  label: '通话背景声噪'
                },
                {
                  value: '用户讲方言',
                  label: '用户讲方言'
                }
              ]
            },
            {
              title:'无意向客户',
              arr:[
                {
                  value: '刷单或羊毛用户',
                  label: '刷单或羊毛用户'
                },
                {
                  value: '接听后挂断',
                  label: '接听后挂断'
                },
                {
                  value: '表示没资金或只是注册看看',
                  label: '表示没资金或只是注册看看'
                },
                {
                  value: '在忙不接受预约回访',
                  label: '在忙不接受预约回访'
                },
                {
                  value: '借款人',
                  label: '借款人'
                }
              ]
            }
          ]
          
        },
        character:{
          value:'',
          options:[{
            value: '平和友善',
            label: '平和友善'
          },{
            value: '中性',
            label: '中性'
          },{
            value: '冷淡',
            label: '冷淡'
          },{
            value: '不友好',
            label: '不友好'
          }]
        },
        preference:{
          value:[],
          options:[{
            value: '平台安全（是否存管、托管）',
            label: '平台安全（是否存管、托管）'
          },{
            value: '喜欢短期标',
            label: '喜欢短期标'
          },{
            value: '喜欢长期标',
            label: '喜欢长期标'
          },{
            value: '对赚取财币感兴趣',
            label: '对赚取财币感兴趣'
          },{
            value: '关注借款项目安全',
            label: '关注借款项目安全'
          },{
            value: '手机操作',
            label: '手机操作'
          },{
            value: '电脑操作',
            label: '电脑操作'
          }]
        },
        feedback:{
          value:[],
          options:[{
            value: '非本人操作',
            label: '非本人操作'
          },{
            value: '不会操作',
            label: '不会操作'
          },{
            value: '操作太复杂',
            label: '操作太复杂'
          },{
            value: '觉得利率有点低',
            label: '觉得利率有点低'
          },{
            value: '在APP上操作遇到bug问题',
            label: '在APP上操作遇到bug问题'
          },{
            value: '债权变现不够灵活，流动性不足',
            label: '债权变现不够灵活，流动性不足'
          }]
        },
        channel:{
          value:[],
          options:[{
            value: '亲戚朋友介绍',
            label: '亲戚朋友介绍'
          },{
            value: '百度等搜索引擎',
            label: '百度等搜索引擎'
          },{
            value: '电视/广播/报纸',
            label: '电视/广播/报纸'
          },{
            value: '社交论坛',
            label: '社交论坛'
          },{
            value: '户外广告',
            label: '户外广告'
          },{
            value: '其他',
            label: '其他'
          }]
        },
        reason:{
          value:[''],
          options:[{
            value: '利率太低',
            label: '利率太低'
          },{
            value: '行业动荡，跑路太多',
            label: '行业动荡，跑路太多'
          },{
            value: '不懂P2P理财',
            label: '不懂P2P理财'
          },{
            value: '担心平台安全',
            label: '担心平台安全'
          },{
            value: '不想投资了',
            label: '不想投资了'
          },{
            value: '急用资金周转',
            label: '急用资金周转'
          },{
            value: '投资到其他平台了',
            label: '投资到其他平台了'
          },{
            value: '投不上标',
            label: '投不上标'
          }]
        },
        remarkCont:'',
        history:[
        ],
      },
      collectionData: {
        id: null,
        dialog: false,
        value:"",
        active: null,
        options:[{
          value:'需要进行再次联系的客户'
        },{
          value:'需要进行再次联系的客户'
        }],
        // 判断是编辑还是确认
        modify: null
      },
      shoucangData: {
        id: null,
        dialog: false,
        value:"",
        active: null,
        options:[{
          value:'需要进行再次联系的客户'
        },{
          value:'需要进行再次联系的客户'
        }],
        // 判断是编辑还是确认
        modify: null
      },
      bankData: {
        dialog: false,
        dialog1: false,
        id: '',
        UsrCustId: '',
        date: [
          dateFormat(new Date(), 'YYYY-MM'),
          new Date()
        ],
        tableData: [],
        DepoBankSeq: '',
        OrdId: ''
      },
      auto: {
        dialog: false,
        tableData:'',
      },
      kfValue: 0,
      kfIndex: 0,
      dialogKfVisible: false,
      total: 0,
      currentPage:1,
      targetPage:1,
      pageSize:{
        value:20,
        opts:[20,30,40],
      },
      // 判断是默认，还是精确，还是模糊
      query: "精确查询",
      path: window.path,
      // 添加字段
      paixu:'',
    }
  },
  props: {
    accurate:{
      type: Object
    },
    vague:{
      type: Object
    },
    PtTitle:String,
    Pgroup:String,
    PgroupId:Number,
  },
  computed: {
    userInfo () {
      return this.$store.getters.getUserInfo
    },
    cuGroup(){
      // return this.$store.getters.getUserInfo.userGroup
      // console.log('Pgroup:', this.Pgroup)
      return this.Pgroup
    },
    cuHeight(){
      return this.h
    },
    cuCallType(){
      return this.$store.getters.callMsg.callType
    },
  },
  watch:{
    cuGroup(val){
      this._updateDataByQuery()
    }
  },
  mounted () {
    this.watchPhone = this.watchPhoneArr()
  },
  methods: {
    // 添加参数
    sureShouCang(){
      this.shoucangData.dialog = false;
      this.$get(this,{api:'manage/delBqByKUid.do',data: {
          fUid:this.shoucangData.id
          }
        }).then(({data})=>{
          
        })
      this.tableData.forEach((obj)=>{
        console.log(obj)
        if(this.shoucangData.id===obj.id){
          obj.bqName =null
        }
        });
    },
    shoucangFN(id){
      this.shoucangData.dialog = true;
      this.shoucangData.id = id;
      
    },
    handleScroll(e){
      const scrLeft = e.target.scrollLeft
      this.$refs['vipIndexTable'].scrollLeft = scrLeft
      this.$refs['vipIndexTableTitle'].scrollLeft = scrLeft
    },
    handleSort(param){
      const paixu = this.paixu
      if(param==='fSjje'){
        switch (paixu){
          case 'fSjje_asc':
            this.paixu = 'fSjje_desc'
            break
          default:
            this.paixu = 'fSjje_asc'
        }
      }
      if(param==='syts'){
        switch (paixu){
          case 'syts_asc':
            this.paixu = 'syts_desc'
            break
          default:
            this.paixu = 'syts_asc'
        }
      }
      if(param ==='dsje'){
        switch (paixu){
          case 'dsje_asc':
            this.paixu = 'dsje_desc'
            break
          default:
            this.paixu = 'dsje_asc'
        }
      }
      if(param === 'fScore'){
        switch (paixu){
          case 'fScore_asc':
            this.paixu = 'fScore_desc'
            break
          default:
            this.paixu = 'fScore_asc'
        }
      }
      if(param === 'tDate'){
        switch (paixu){
          case 'tDate_asc':
            this.paixu = 'tDate_desc'
            break
          default:
            this.paixu = 'tDate_asc'
        }
      }
      if(param === 'zjtzDate'){
        switch (paixu){
          case 'zjtzDate_asc':
            this.paixu = 'zjtzDate_desc'
            break
          default:
            this.paixu = 'zjtzDate_asc'
        }
      }
      if(param === 'whDate'){
        switch (paixu){
          case 'whDate_asc':
            this.paixu = 'whDate_desc'
            break
          default:
            this.paixu = 'whDate_asc'
        }
      }
      if(param === 'zrDate'){
        switch (paixu){
          case 'zrDate_asc':
            this.paixu = 'zrDate_desc'
            break
          default:
            this.paixu = 'zrDate_asc'
        }
      }
      if(param === 'tSmshsj'){
        switch (paixu){
          case 'tSmshsj_asc':
            this.paixu = 'tSmshsj_desc'
            break
          default:
            this.paixu = 'tSmshsj_asc'
        }
      }
      this.getVagData()
    },
    //
    watchPhoneArr(){
      // 根据pageSize的值动态修改watchPhone的状态
      // 指定查询，翻页的时候进行watchPhone的更新
      const pageSize = this.pageSize.value
      const tmpa = []
      for(let i = 0; i < pageSize; i++){
        tmpa.push({
          isTrue:false
        })
      }
      return tmpa
    },
    prev () {
      this.handleCurrentChange(this.currentPage - 1)
    },
    next () {
      this.handleCurrentChange(this.currentPage + 1)
    },
    goDetail (id,index) {
      this.$router.push({ path: `/vip-manage/detail/${id}/jbxx`})
    },
    // 查看手机
    watch (i,id) {
      console.log('2.18.1.17',i)
      if(id !== undefined){
        this.markDial(id)
      }
      this.watchPhone[i].isTrue = true
    },
    callPhone (phone,id) {
      if(id !== undefined){
        this.markDial(id)
      }
      // 判断是省内，还是省外
      this.$get(this,{api:'ajaxapi/isFouWz.do',data: {
          mobile: phone,
          yhm: this.userInfo.usertel
        }
      }).then(({data})=>{
        if (data.state === 0) {
          this.$confirm({
            message: '确认拨打？',
            success: ()=>{
              this.callout(data.content)
            }
          })
        }
      }).catch(e=>{
        console.log('ajaxapi/isFouWz:', e)
      })
    },
    // 标记拨打操作
    async  markDial(id){
      const api = 'member/looktel.do'
      try{
        const {data} = await this.$get(this,{
          api,
          data:{
            fuid:id
          }
        })
        if(data.state === 0){
          console.log(`接口${api}标记成功`)
          return
        }
        console.warn(`接口${api}标记失败信息:`,data.message)
      }catch(e){
        console.warn(`接口${api}执行出错信息:`, e.message)
        this.$warn(`接口执行出错`)
      }
    },
    //
    // 增加删除微信
    addWx (id,zt,i) {
      if (zt == 0) {
        this.$confirm({
          title: '提示',
          message: '是否添加?',
          success:()=> {
            this.$get(this,{api:'manage/upWx.do',data: {
              id
            }}).then(({data})=>{
              if (data.state === 0) {
                this.tableData[i].fIsWeixin = '1';
                this.$message({
                  type: 'success',
                  message: '成功!'
                });
              } else {
                this.$toast({
                  message: data.message
                })
              }
            })
          }
        })
      } else {
        this.$confirm({
          title: '提示',
          message: '是否删除?',
          success:()=> {
            this.$get(this,{api:'manage/downWx.do',data: {
              id
            }}).then(({data})=>{
              if (data.state === 0) {
                this.tableData[i].fIsWeixin = '0';
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              } else {
                this.$toast({
                  message: data.message
                })
              }
            })
          }
        })
      }
    },
    // 页码
    handleCurrentChange(val) {
      //
      console.log(this.tableData.length)
        val = Number.parseFloat(val)
        if(Number.isNaN(val)){
          this.$toast({
            message: '请输入页码'
          })
          return
        }
        if(val < 1 ){
          // val ++
          this.$toast({
            message: '已经是第一页了'
          })
          return
        }else if(val > this.currentPage && this.tableData.length < this.pageSize.value){
          // val--
          this.$toast({
            message: '后面没内容了'
          })
          return
        }
        this.currentPage = val
        // 初始化watchPhoneArr
        this.watchPhone = this.watchPhoneArr()
        this._updateDataByQuery()
    },
    _updateDataByQuery(){
      if (this.query === '默认') {
          this.getTData()
      }
      if (this.query === "精确查询") {
        this.getAccData()
      }
      if (this.query === "模糊查询") {
        this.getVagData()
      }
    },
    // 添加收藏标签
    collectionAdd () {
      if (this.collectionData.value !== '') {
        if (this.collectionData.value === '') {
          this.$message({
            message: '填写后添加',
            type: 'warning'
          });
          return false;
        }
        if (this.collectionData.options.length >= 12) {
          this.$message({
            message: '最多12条',
            type: 'warning'
          });
          return false;
        }
        this.$get(this,{api:'manage/addBq.do',data: {
          bqName:this.collectionData.value,
          kfid:this.$store.state.user.userInfo.id
          }
        }).then(({data})=>{
          if (data.state === 0) {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.collectionData.options.push({bqName:this.collectionData.value,id:this.collectionData.options.length+1})
            this.collectionData.value = "";
          } else {
            this.$toast({
              message: data.message
            })
          }
        })
      } else {
        this.$message({
          message: '请填写内容',
          type: 'warning'
        });
      }
    },
    // 收藏里选中的标签
    activeLabel (i) {
      this.collectionData.active = i;
    },
    // 收藏弹窗
    CollectionDialog(id) {
      this.collectionData.dialog = true;
     
      this.$get(this,{api:'manage/loadBiaoqs.do',data: {
        fUid:id,
        kfid:this.$store.state.user.userInfo.id
      }}).then(({data})=>{
        if (data.state === 0) {
          this.collectionData.id= id;
          this.collectionData.options = data.content[0].length > 12 ? data.content[0].slice(0,12):data.content[0];
          this.collectionData.active = data.content[1] ? data.content[1].bqId : null;
          
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    // 编辑标签
    collectionModify () {
      for(var i=0;i<this.collectionData.options.length;i++){
        if(this.collectionData.options[i].id==this.collectionData.active){
           this.bqindex = this.collectionData.options[i].bqName
        }
      }
      if (!this.collectionData.modify) {
        this.collectionData.modify = this.collectionData.active;
        
      } else if(this.collectionData.modify && this.collectionData.active){
        
      this.$get(this,{api:'manage/upBq.do',data: {
        id: this.collectionData.active,
        bqName: this.bqindex
      }}).then(({data})=>{
        if (data.state === 0) {
          this.collectionData.modify = null;
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        } else {
          this.$toast({
            message: data.message
          })
        }
      })

      }
    },
    // 保存标签
    saveCollectionDialog () {
      
      if (!this.collectionData.active) {
        this.$message({
          message: '请先选择标签',
          type: 'warning'
        });
        return false;
      }
      if(this.collectionData.modify !== null){
        this.$message({
          message: '请先确认标签',
          type: 'warning'
        });
        return false;
      }
      this.$get(this,{api:'manage/addBqByKUid.do',data: {
        fUid: this.collectionData.id,
        bqId: this.collectionData.active,
      }}).then(({data})=>{
        if (data.state === 0) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          // 优化：使用收藏功能收藏成功后，自动刷新页面显示收藏内容 （10.30）
          console.log(this.tableData)
          this.tableData.forEach((obj)=>{
            if (obj.id === this.collectionData.id) {
              this.collectionData.options.forEach(item=>{
                if(item.id === this.collectionData.active){
                  obj.bqName = item.bqName
                }
              })
              // obj.bqName = this.collectionData.options[this.collectionData.active-1].bqName;
            }
          });
          this.collectionData.dialog = false;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    // 备注
    // 备注弹窗
    remarkDialog (id) {
      console.log(id)
      this.remarkData.dialog = true;
      this.remarkData.id=id;
      this.remarkData.remarkCont = "";
      this.$get(this,{api:'manage/loadState.do',data: {
          fuid:id
      }}).then(({data})=>{

        if (data.state === 0) {
          //客户状态
          this.remarkData.situation.value = data.content.m1 && data.content.m1.cKfState ? String(data.content.m1.cKfState) : '';
          //客户性格
          this.remarkData.character.value = data.content.m1 && data.content.m1.cKhgx;
          // 客户偏好
           this.remarkData.preference.value = data.content.m1 && data.content.m1.cKhph ? data.content.m1.cKhph.split(',') : [];
          //客户反馈
          this.remarkData.feedback.value = data.content.m1 && data.content.m1.cKhfk ? data.content.m1.cKhfk.split(',') : [];
          //了解网贷平台的途径
          this.remarkData.channel.value = data.content.m1 && data.content.m1.cLjtj ? data.content.m1.cLjtj.split(',') : [];
          //流失原因
          this.remarkData.reason.value = data.content.m1 && data.content.m1.cLsyy ? data.content.m1.cLsyy.split(',') : [];   // 对m2添加容错
          //备注
          // this.remarkData.remarkCont = data.content.m2 && data.content.m2.length > 0 && data.content.m2[0].cNr ? data.content.m2[0].cNr : '';   // 对m2添加容错
          // 历史记录
          this.remarkData.history = data.content.m2 || [];
        } else {
          this.$toast({
            message: data.message
          })
        }
      }).catch(e=>{
        console.log('manage/loadState:', e)
      })
    },
    // 保存备注
    saveRemarkDialog() {
      // console.log(this.remarkData.id)
      
      // console.log('2018.1.16',this.tableData)
      this.$get(this,{api:'manage/saveState.do',data: {
          fuid:this.remarkData.id,
          fKfid: this.userInfo.id,
          cKfState: this.remarkData.situation.value,
          cQQ: this.userInfo.cQQ,
          cKhph: this.remarkData.preference && this.remarkData.preference.value.join(','),
          cKhgx: this.remarkData.character.value,
          cKhfk: this.remarkData.feedback && this.remarkData.feedback.value.join(','),
          cLjtj: this.remarkData.channel.value && this.remarkData.channel.value.join(','),
          cNr: this.remarkData.remarkCont,
          cLsyy: this.remarkData.reason.value && this.remarkData.reason.value.join(','),
          groupId: this.userInfo.userGroupId,
      }}).then(({data})=>{
        if (data.state === 0) {
          this.remarkData.dialog= false;
          // this.handleCurrentChange(this.currentPage);
          // this._updateDataByQuery()
          this.$message({
            message: '提交成功！',
            type: 'success'
          });
          this.tableData.forEach((item,index)=>{
            if(item.id === this.remarkData.id){
              item.whcs++
            }
          })
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    //
    // 银行流水弹窗
    bankDialog (index) {
      this.bankData.id = this.tableData[index].id;
      this.bankData.UsrCustId = this.tableData[index].gzyh;
      this.bankData.dialog =true;
      this.getBankDetail()
    },
    // 银行流水详情弹窗
    bankData_detail (index) {
      this.bankData.DepoBankSeq = this.bankData.tableData[index].DepoBankSeq;
      this.getOrdId();
      this.bankData.dialog1 =true;
    },
    // 获得银行流水
    getBankDetail () {
        this.$get(this,{api:'bank/detail.do',data: {
            id: this.bankData.id,
            UsrCustId: this.bankData.UsrCustId,
            BeginDate: this.bankData.date && dateFormat(this.bankData.date[0], 'YYYYMMDD'),
            EndDate: this.bankData.date && dateFormat(this.bankData.date[1], 'YYYYMMDD'),
          }
        }).then(({data})=>{
          if (data.state === 0) {
            var obj = JSON.parse(data.content)
            if (obj.RespCode === '000') {
              this.bankData.tableData = obj.Details;
            } else {
              this.$toast({
                message: obj.RespDesc
              })
            }
          } else {
            this.$toast({
              message: data.message
            })
          }
        }).catch(e=>{
        console.log('bank/detail:', e)
      })
    },
    getOrdId () {
        this.$get(this,{api:'bank/findOrdId.do',data: {
            DepoBankSeq: this.bankData.DepoBankSeq,
          }
        }).then(({data})=>{
          if (data.state === 0) {
            this.bankData.OrdId = data.content;
          } else {
            this.$toast({
              message: data.message
            })
          }
        })
    },
    // 取消收藏弹窗
    cancleCollectionDialog() {
      this.collectionData.modify = null;
      this.collectionData.dialog = false;
    },
    //取消收藏客户
    cancleShouCang(){
      this.shoucangData.dialog = false;
    },
    // 取消备注弹窗
    cancleRemarkDialog() {
      this.remarkData.value = '';
      this.remarkData.dialog= !this.remarkData.dialog;
    },
    _ftTableHeight(){
      const h = this.$refs['tableData'].offsetHeight
      this.h = h + 'px'
    },
    // 精确查询
    getAccurateDate () {
        this.query = "精确查询"
        this.currentPage = 1
        this.watchPhone = this.watchPhoneArr()
        this.getAccData()
    },
    async getAccData(){
      const page = this.currentPage
      const pageSize = this.pageSize.value
      try{
        const {data} = await this.$get(this,{api:'manage/exactFind.do',data: {
              // groupId: this.userInfo.userGroupId,
              groupId: this._gCN2gId(this.cuGroup),
              id: this.accurate.id,
              cU_ser: this.accurate.userName,
              cName:this.accurate.zsName,
              cMtel: this.accurate.phoneNumber,
              cZjhm: this.accurate.sfzNumber,
              pageSize,
              page
            }
          })
        if (data.state === 0) {
          // this.watchPhone = this.watchPhoneArr()
          this.tableData = data.content.data
          // 获取数据之后根据tableData的高度来进行高度改变
          this.$nextTick(this._ftTableHeight)
          if (page == 1) {
            this.total = data.content.num
            // this.currentPage = 1
          }
        } else {
          this.$toast({
            message: data.message
          })
        }
      }catch(e){
        this.$warn('manage/exactFind.do:' + e)
      }
    },
    getUserGroupId(){
      let selGroupId
      const choiceOpts = this.vague.choice.options
      const choicVal = this.vague.choice.value
      choiceOpts.forEach((item,index) => {
        if(item.id === choicVal){
          selGroupId = item.UserGroupId
        }
      })
      return selGroupId
    },
    // 模糊查询
    getVagueDate () {
        this.query = "模糊查询"
        this.currentPage = 1
        this.paixu = ''
        this.watchPhone = this.watchPhoneArr()
        this.getVagData()
    },
    async getVagData(){
      const page = this.currentPage
      const pageSize = this.pageSize.value
      const selKFGroupId = this.getUserGroupId()
      try{
        const { data } = await this.$get(this, {
          api: 'manage/rudeFind.do', data: {
            //添加参数
            syts:this.vague.dayNumber,
            paixu:this.paixu,
            //
            // 回访组参数
            // vip等级
            vipLev:this.vague.vip.value,
            // 投资时间
            tzst:this.vague.investTime && dateFormat(this.vague.investTime[0], 'YYYY-MM-DD'),
            tzet:this.vague.investTime && dateFormat(this.vague.investTime[1], 'YYYY-MM-DD'),
            // 联系时间
            whst:this.vague.relateTime && dateFormat(this.vague.relateTime[0], 'YYYY-MM-DD'),
            whet:this.vague.relateTime && dateFormat(this.vague.relateTime[1], 'YYYY-MM-DD'),
            // 转入时间
            zrst:this.vague.inTime && dateFormat(this.vague.inTime[0], 'YYYY-MM-DD'),
            zret:this.vague.inTime && dateFormat(this.vague.inTime[1], 'YYYY-MM-DD'),
            // 待收
            dsx:this.vague.dl.startVal,
            dsd:this.vague.dl.endVal,
            // 清零时间
            qlst:this.vague.qlTime && dateFormat(this.vague.qlTime[0], 'YYYY-MM-DD'),
            qlet:this.vague.qlTime && dateFormat(this.vague.qlTime[1], 'YYYY-MM-DD'),
            //
            channelId: this.vague.qdNumber,
            isFouYqr:this.vague.yaoqing.value,
            tDate: this.vague.registerTime && dateFormat(this.vague.registerTime[0], 'YYYY-MM-DD'),
            tDate1: this.vague.registerTime && dateFormat(this.vague.registerTime[1], 'YYYY-MM-DD'),
            // whDate: this.vague.maintainTime && dateFormat(this.vague.maintainTime[0], 'YYYY-MM-DD'),
            // whDate1: this.vague.maintainTime && dateFormat(this.vague.maintainTime[1], 'YYYY-MM-DD'),
            // hkDate: this.vague.remitTime && dateFormat(this.vague.remitTime[0], 'YYYY-MM-DD'),
            // hkDate1: this.vague.remitTime && dateFormat(this.vague.remitTime[1], 'YYYY-MM-DD'),
            khfl: this.vague.classify.value && this.vague.classify.value,
            fShzt: this.vague.biddingStatus.value && this.vague.biddingStatus.value,
            // tSmshsj: this.vague.nameTime && dateFormat(this.vague.nameTime[0], 'YYYY-MM-DD'),
            // tSmshsj1: this.vague.nameTime && dateFormat(this.vague.nameTime[1], 'YYYY-MM-DD'),
            // zrDate: this.vague.shiftTime && dateFormat(this.vague.shiftTime[0], 'YYYY-MM-DD'),
            // zrDate1: this.vague.shiftTime && dateFormat(this.vague.shiftTime[1], 'YYYY-MM-DD'),
            // zjtzDate: this.vague.biddingTime && dateFormat(this.vague.biddingTime[0], 'YYYY-MM-DD'),
            // zjtzDate1: this.vague.biddingTime && dateFormat(this.vague.biddingTime[1], 'YYYY-MM-DD'),
            khxz: this.vague.nature.value && this.vague.nature.value,
            fXdykf: this.vague.choice.value && this.vague.choice.value,
            kfGroupId: selKFGroupId || '', // 新增客服组ID
            zhzt: this.vague.state.value && this.vague.state.value,
            llqk: this.vague.situation.value && this.vague.situation.value,
            bqName: this.vague.collection.value && this.vague.collection.value,
            tShenri: this.vague.age.value && this.vague.age.value.split(',')[0],
            tShenri1: this.vague.age.value && this.vague.age.value.split(',')[1],
            fBlx: this.vague.type.value && this.vague.type.value,
            yhlx: this.vague.yhlx.value && this.vague.yhlx.value, //添加用户类型
            spf: this.vague.pf.value && this.vague.pf.value.split(',')[0],
            epf: this.vague.pf.value && this.vague.pf.value.split(',')[1],
            yhksh: this.vague.yhk.value,    // 添加银行卡审核
            // groupId: this.userInfo.userGroupId,
            groupId: this._gCN2gId(this.cuGroup),
            pageSize,
            page,
          }
        })
        
        if (data.state === 0) {
          // this.watchPhone = this.watchPhoneArr()
          this.tableData = data.content.data
          // 获取数据之后根据tableData的高度来进行高度改变
          this.$nextTick(this._ftTableHeight)
          // 获取数据之后重置watchPhone
          if (page == 1) {
            this.total = data.content.num
            // this.currentPage = 1;
          }
        } else {
          this.$toast({
            message: data.message
          })
        }
      }catch(e){
        this.$warn('manage/rudeFind.do:' + e)
      }
    },
    // 默认查询
    getTableData (page) {
      // this.curre
      this.currentPage = 1
      this.watchPhone = this.watchPhoneArr()
      this.getTData()
    },
    async getTData(){
      const page = this.currentPage
      const pageSize = this.pageSize.value
      try{
        const { data } = await this.$get(this, {
          api: 'manage/loadManags.do', data: {
            // groupId: this.userInfo.userGroupId,
            groupId: this._gCN2gId(this.cuGroup),
            pageSize,
            page,
          }
        })
        if (data.state === 0) {
          // this.watchPhone = this.watchPhoneArr()
          this.tableData = data.content.data
          // 获取数据之后根据tableData的高度来进行高度改变
          this.$nextTick(this._ftTableHeight)
          if (page == 1) {
            this.total = data.content.num
            // this.currentPage = 1
          }
        } else {
          this.$toast({
            message: data.message
          })
        }
      }catch(e){
        this.$warn('manage/loadManags.do:' + e)
      }
    },
    // 根据组名得到组ID
    _gCN2gId(gname){
      console.log(gname)
      switch(gname){
        case '业务组':
          return 104
           case '质检组':
          return 40
        case '答疑组':
          return 100
        case '回访组':
          return 112
          
      }
    },
    //
    kfDialog (index,kfName) {
      if(kfName && (this.userInfo.power === 2 || this.userInfo.power === 5) && (this.userInfo.userGroupId === 104 || this.userInfo.userGroupId === 112)){
        this.kfIndex = index;
        this.dialogKfVisible = true;
      }
    },
    async updatekf () {
      let {data} = await this.$get(this,{api:'manage/changeKf.do',data: {
          groupId: this.userInfo.userGroupId,
          yKf: this.tableData[this.kfIndex].fXdykf,
          fuid: this.tableData[this.kfIndex].id,
          xKf: this.kfValue,
        }
      })
      this.dialogKfVisible = false;
      if (data.state === 0) {
          this.$message({
            message: '提交成功！',
            type: 'success'
          });
          this.vague.choice.options.map((o)=>{
            if (this.kfValue === o.id) {
              this.tableData[this.kfIndex].fXdykf1 = o.UserName;
            }
          })
      } else {
        this.$toast({
          message: data.message
        })
      }
    },
    //导出文件
    export_ () {
      window.open(`${this.path}/bank/excel.do?id=${this.bankData.id}&UsrCustId=${this.bankData.UsrCustId}&BeginDate=${dateFormat(this.bankData.date[0], 'YYYYMMDD')}&EndDate=${dateFormat(this.bankData.date[1], 'YYYYMMDD')}`)
    },
    showAuto (id,yhk) {
      // this.auto.dialog =true;
      // this.$get(this,{api:'bank/AutoBid.do',data: {
      //     fuid: id,
      //     UsrCustId: yhk
      //   }
      // }).then(({data})=>{
      //   if (data.state === 0) {
      //     this.auto.tableData.push(data.content);
      //   }
      // }).catch(e=>{
      //   console.log('bank/AutoBid:', e)
      // })
      this.auto.dialog = true
      this.$get(this,{api:'manage/zdtb.do',data: {
          fuid: id,
          // UsrCustId: yhk
        }
      }).then(({data})=>{
        if (data.state === 0) {
          this.auto.tableData = data.content
        }
      }).catch(e=>{
        console.log('manage/zdtb.do', e)
      })
    }
  },
}
</script>
<style lang="scss" module>
  // 添加
  .sortBox{
    position:relative;
    margin-left:4px;
    font-size:12px;
  }
  .caret{
    position: absolute;
    transform: scale(.8,.8);
  }
  .top{
    top:-2px;
  }
  .bottom{
    top:6px;
  }
  .active{
    color:#20a0ff;
  }
  .pointer{
    cursor:pointer;
  }
  .noBorder{
    border:none!important;
  }
  //

  .targetPage{
    width: 60px;
    line-height: 20px;
    border: 1px solid #888;
    color: #48576a;
    text-align: center;
    display: inline-block;
    margin-right:20px;
  }
  .tjr{
    color:red;
    cursor:pointer;
  }
  .idRed{
    color:red;
  }
  .tit{
    font-weight:600;
  }
  //
  .newstr{
  margin-top:10px !important;
}
  .row {
    width: 100%;
    overflow: hidden;
    line-height: 36px;
    border-bottom:1px solid #dddfe6;
    li {
      height: 36px;
      float: left;
      text-align: center;
      border-right:1px solid #dddfe6;
      box-sizing: border-box;
      font-size: 12px;
      position: relative;
      //
    }
  }

  // 业务组td宽度
  .ellipsis{
    text-overflow : ellipsis
  }
  .stct{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    line-height:18px;
  }
  .phoneIcon{
    transform:translateY(3px) scale(.9,.9);
    cursor:pointer;
  }
  .qd{
    position:absolute;
    top:2px;
    left:0;
    width:100%;
    text-align:center;
    line-height:18px;
  }
  // 业务
  $ywlen:16;
  @for $ywi from 1 through $ywlen {
    .ywTdWid#{$ywi}{
      @if $ywi == 1 {width:calc(100 / #{$ywlen} * 1% - 1%);}
      @if $ywi == 2 {width:calc(100 / #{$ywlen} * 1% - 4%);}
      @if $ywi == 3 {width:calc(100 / #{$ywlen} * 1% - 1%);}
      @if $ywi == 4 {width:calc(100 / #{$ywlen} * 1% + 1%);}
      @if $ywi == 5 {width:calc(100 / #{$ywlen} * 1% - 2%);}
      @if $ywi == 6 {width:calc(100 / #{$ywlen} * 1% - 2%);}
      @if $ywi == 7 {width:calc(100 / #{$ywlen} * 1% - 1%);}
      @if $ywi == 8 {width:calc(100 / #{$ywlen} * 1% + 3%);}
      @if $ywi == 9 {width:calc(100 / #{$ywlen} * 1% - 2%);}
      @if $ywi == 10 {width:calc(100 / #{$ywlen} * 1% + 2%);}
      @if $ywi == 11 {width:calc(100 / #{$ywlen} * 1% + 2%);}
      @if $ywi == 12 {width:calc(100 / #{$ywlen} * 1% + 3%);}
      @if $ywi == 13 {width:calc(100 / #{$ywlen} * 1% - 1%);}
      @if $ywi == 14 {width:calc(100 / #{$ywlen} * 1% - 1%);}
      @if $ywi == 15 {width:calc(100 / #{$ywlen} * 1% - 1%);}
      @if $ywi == 16 {width:calc(100 / #{$ywlen} * 1% + 5%);}
    }
  }
  // 答疑
  // sass优化
  $dylen:19;
  @for $dyi from 1 through $dylen {
    .dyTdWid#{$dyi}{
      @if $dyi == 1 {width:calc(100 / #{$dylen} * 1% + 3%);}
      @if $dyi == 2 {width:calc(100 / #{$dylen} * 1% - 1%);}
      @if $dyi == 3 {width:calc(100 / #{$dylen} * 1% - 2%);}
      @if $dyi == 4 {width:calc(100 / #{$dylen} * 1% - 2%);}
      @if $dyi == 5 {width:calc(100 / #{$dylen} * 1% + 2%);}
      @if $dyi == 6 {width:calc(100 / #{$dylen} * 1% - 2%);}
      @if $dyi == 7 {width:calc(100 / #{$dylen} * 1%);}
      @if $dyi == 8 {width:calc(100 / #{$dylen} * 1% - 2%);}
      @if $dyi == 9 {width:calc(100 / #{$dylen} * 1% - 2%);}
      @if $dyi == 10 {width:calc(100 / #{$dylen} * 1% + 3%);}
      @if $dyi == 11 {width:calc(100 / #{$dylen} * 1% + 4%);}
      @if $dyi == 12 {width:calc(100 / #{$dylen} * 1%);}
      @if $dyi == 13 {width:calc(100 / #{$dylen} * 1%);}
      @if $dyi == 14 {width:calc(100 / #{$dylen} * 1%);}
      @if $dyi == 15 {width:calc(100 / #{$dylen} * 1% - 1%);}
      @if $dyi == 16 {width:calc(100 / #{$dylen} * 1%);}
      @if $dyi == 17 {width:calc(100 / #{$dylen} * 1% + 2%);}
      @if $dyi == 18 {width:calc(100 / #{$dylen} * 1% - 1%);}
      @if $dyi == 19 {width:calc(100 / #{$dylen} * 1% - 2%);}
    }
  }
  //
  // 回访
  $hflen:18;
  @for $hfi from 1 through $hflen {
    .hfTdWid#{$hfi}{
      @if $hfi == 1 {width:calc(100 / #{$hflen} * 1% + 2%);}
      @if $hfi == 2 {width:calc(100 / #{$hflen} * 1% - 2%);}
      @if $hfi == 3 {width:calc(100 / #{$hflen} * 1% - 3%);}
      @if $hfi == 4 {width:calc(100 / #{$hflen} * 1%);}
      @if $hfi == 5 {width:calc(100 / #{$hflen} * 1% + 2%);}
      @if $hfi == 6 {width:calc(100 / #{$hflen} * 1% - 3%);}
      @if $hfi == 7 {width:calc(100 / #{$hflen} * 1% + 2%);}
      @if $hfi == 8 {width:calc(100 / #{$hflen} * 1% + 2%);}
      @if $hfi == 9 {width:calc(100 / #{$hflen} * 1% + 2%);}
      @if $hfi == 10 {width:calc(100 / #{$hflen} * 1% + 2%);}
      @if $hfi == 11 {width:calc(100 / #{$hflen} * 1% + 2%);}
      @if $hfi == 12 {width:calc(100 / #{$hflen} * 1% - 1%);}
      @if $hfi == 13 {width:calc(100 / #{$hflen} * 1% - 1%);}
      @if $hfi == 14 {width:calc(100 / #{$hflen} * 1% - 2%);}
      @if $hfi == 15 {width:calc(100 / #{$hflen} * 1% - 2%);}
      @if $hfi == 16 {width:calc(100 / #{$hflen} * 1% + 2%);}
      @if $hfi == 17 {width:calc(100 / #{$hflen} * 1% - 1%);}
      @if $hfi == 18 {width:calc(100 / #{$hflen} * 1% - 1%);}
    }
  }
  //

  .h3{
    font-size:14px;
    padding:15px 0 0 10px;
    font-weight:400;
  }
  .name {
    cursor:pointer;
  }
  .name:hover {
    color: #5e91fe;
  }
  //
  .titleBox {
    position:fixed;
    // top:420px;
    // left:280px;
    // right:105px;
    left:250px;
    right:75px;
    will-change: top;
    border:1px solid #dddfe6;
    border-bottom:none;
    overflow-x:auto;
    background: #fafbfc;
    z-index:1;
    transition:top .2s;
    li {
      background: #fafbfc;
    }
  }
  // .hfFixTop{
  //   top:410px;
  // }
  //
  .watch {
    color: #5394fc;
    cursor:pointer;
  }
  .red {
    color: #ff4949;
  }
  .sj1 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #d9dce3;
    position: absolute;
    right: 50px;
    top: 19px;
    cursor:pointer;
  }
  .sj2 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #d9dce3;
    position: absolute;
    right: 50px;
    bottom: 19px;
    cursor:pointer;
  }
  .sj1:hover{
    border-bottom: 10px solid #5c8ffb;
  }
  .sj2:hover {
    border-top: 10px solid #5c8ffb;
  }
  .remarkBox {
    .title {
      width: 100%;
      border-bottom: 1px solid #dddfe6;
      text-align:center;
      font-size: 24px;
      height: 80px;
      line-height: 80px;
    }
    .detail {
        padding: 20px;
    }
    .history {
      margin-top: 20px;
    }
  }
  .collection {
    .title {
      width: 100%;
      border-bottom: 1px solid #dddfe6;
      text-align: center;
      font-size: 24px;
      height: 80px;
      line-height: 80px;
    }
    .tit {
      margin: 20px 0;
      font-size: 16px;
    }
  }
  .tip {
    background: #9af6c2;
    float: left;
    padding:8px 10px;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .tip.active {
    background: #ffeb3b;
  }
  .click {
    color: #5394fc;
    display: block;
    height:14px;
    text-decoration: underline;
    cursor: pointer;
  }
  .clicktr{
    color:red;
    height: 14px;
    margin-top:5px;
    display:block;
  }
  .pagerBox{
    margin:15px 0; float:right;font-size:14px;
  }
  .pager {
    width: 100px;
    line-height: 20px;
    border: 1px solid #d1dbe5;
    color: #48576a;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border-radius: 10px;
    font-size:14px;
  }
  // 处理滚动条
  .box {
    position:relative;
    box-sizing: border-box;
    border: 1px solid #dddfe6;
    overflow: hidden;
  }
  .contWrapper{
    position:absolute;
    left:0;
    top:0;
    width:calc(100% + 18px);
    overflow-y: scroll;
  }
</style>

<style lang="scss" scoped>
.show{
  ul{
    transition:background-color .2s;
    &:hover{
      // background-color:#fafbfc;
      background-color:#e9e9e9;
    }
    .add{
      transform:rotate(45deg) translateY(2px);
      color:#13CE66;
      font-size:16px;
    }
    .ok{
      transform:translateY(2px);
      font-size:16px;
      color:#FF4949;
    }
  }
}

.tjrBox{
  //margin-top:10px;
  line-height:20px;
}
</style>
